<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.active{ background:yellow}
#div1{ float:left}
#div1 div{ width:100px; height:100px; border:1px solid  black; background:#CCC; display:none;}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="div1">
  <a href="javascript:;">左</a>
  <a href="javascript:;">右</a>
  <input type="button"  value="1" class="active"/>
  <input type="button"  value="2"/>
  <input type="button"  value="3"/>
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
</div>
<script type="text/javascript">
	var allInput = document.getElementsByTagName('input');
	var allDiv = div1.getElementsByTagName('div');
	var allA = document.getElementsByTagName('a');
	var 左右的索引值 = 0;


	allA[1].onclick = function(){
		左右的索引值++;
		if(左右的索引值 == allDiv.length)左右的索引值 = 0;
		for(var i = 0;i < allDiv.length;i++){
			allDiv[i].style.display = 'none';
			allInput[i].className = '';
		}
		allDiv[左右的索引值].style.display = 'block';
		allInput[左右的索引值].className = 'active';
	};
	allA[0].onclick = function(){
		左右的索引值--;
		if(左右的索引值 == -1)左右的索引值 = allDiv.length-1;
		for(var i = 0;i < allDiv.length;i++){
			allDiv[i].style.display = 'none';
			allInput[i].className = '';
		}
		allDiv[左右的索引值].style.display = 'block';
		allInput[左右的索引值].className = 'active';
	};
	for(var i = 0;i <allInput.length;i++){
		allInput[i].setAttribute('索引值',i);
		allInput[i].onclick = function(){
			for(var i = 0;i < allInput.length;i++){
				allInput[i].className = '';
				allDiv[i].style.display = 'none';

			}
			this.className = 'active';
			allDiv[this.getAttribute('索引值')].style.display = 'block';
			左右的索引值 = this.getAttribute('索引值');
		}
	}



</script>
</body>
</html>
